<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title>数据库在线考试</title>
	<script type="text/javascript">
		var subject = []; //存储从服务器请求得到的试题
		var subjectID = [];
		var pointer = 0; //做题时题号指针
		var anser = []; //存储试题回答，与试题共用同一指针，保证题与回答一一对应;
		var res = "";
		var time = 2;
		var fff = 0;
		
		function jz(){
			return false;
			}
			document.oncontextmenu=jz;
		
		function loadData(){//异步请求加载试题到 subject 以数组形式存放
			var flag = confirm("确认立刻加入考试？");
			if(!flag) window.location.href = "rebackChoosePage.view";
			else{
				var url = "distributeSubject.view?callback=callback";
				request(url,callback);
			}
		}
		//...
		function callback(xmlhttp){
			//  异步回掉函数，请求完成hou需要的动作
			//此处将从服务器请求得到的题目放入 subject 试题数组
			res = xmlhttp.responseText;
			if(res=="haveDone") haveDone();
			var xxx = res.split("\u0010");
			time = parseInt(xxx[0])*60;
			var s = xxx[1].split("\u0001");
			for(var i=0;i<s.length;i++) {
				var wap = s[i].split("\u0002");
				subject[i] = wap[1];
				subjectID[i] = wap[0];
				anser[i] = " ";
			}
			document.getElementById("l1").value = subject[pointer];
			showTime();
			setInterval(showTime,1000);
		}
		function haveDone(){
			alert("你已完成此考试，恶意重复进入将被视为违规！！！");
			window.location.href = "rebackChoosePage.view";
		}
		function showTime(){
			if(fff!=0) return;
			if(time<1) timeOut();
			var fen = parseInt(time/60);
			var sec = time%60;
			document.getElementById("examTime").innerHTML = "距离考试结束还有："+fen+" 分 "+sec+" 秒";
			time--;
		}
		function timeOut(){
			fff = 2;
			alert("考试时间到，系统将为你提交试卷");
			anser[pointer] = document.getElementById("l2").value;
			createJ();
			var examData = "";
			anser[0] = anser[0]+" ";
			if(anser[subject.length-2]=="" || anser[subject.length-2]==" ") anser[subject.length-2] = "x";
			for(var i=0;i<subject.length-1;i++) examData = examData+subjectID[i]+"\u0002"+anser[i]+"\u0001";
			var url = "sub.view?examData="+examData;
			request(url,stop);
		}

		function sub(){ //考生点击 提交 将试题 答案 连同 试题 提交到服务器
			anser[pointer] = document.getElementById("l2").value;
			var flag = confirm("确定立刻提交以结束考试？");
			if(!flag) return;
			createJ();
			var examData = "";
			anser[0] = anser[0]+" ";
			if(anser[subject.length-2]=="" || anser[subject.length-2]==" ") anser[subject.length-2] = "x";
			for(var i=0;i<subject.length-1;i++) examData = examData+subjectID[i]+"\u0002"+anser[i]+"\u0001";
			var url = "sub.view?examData="+examData;
			request(url,stop);
		}
		function stop(x){
			var res = x.responseText;
			stopJ();
			if(res=="true"){
				alert("提交成功！");
				window.location.href = "rebackChoosePage.view"; //提交成功后页面跳转到选择页面;
			}
			else alert("提交失败！！！");
		}

		function runing(){ //提交答案到服务器验证执行，并返回结果在runback() 函数查看;
			var str=document.getElementById("l2").value;
			anser[pointer] = str;
			//var str = txt.value.slice(txt.selectionStart,txt.selectionEnd);
			var url = "server.view?sql="+str;
			request(url,runBack);
		}

		function runBack(xmlhttp){ //将执行结果写入结果框
			var r = document.getElementById("result");
			var res = xmlhttp.responseText;
			r.value = res.replace(/\u0005|\u0006/g,"");
		}

		function createXMLHttpRequest() { //创建XMLHttpRequest 异步请求对象
			var XMLHttp = 
			[
				function () {return new XMLHttpRequest();},
				function () {return new ActiveXObject("Msxml2.XMLHTTP");},
				function () {return new ActiveXObject("Msxml3.XMLHTTP");},
				function () {return new ActiveXObject("Microsoft.XMLHTTP");}
			];

			var xmlhttp = false;

			for(var i=0;i<XMLHttp.length;i++){
				try{
					xmlhttp = XMLHttp[i]();
				}
				catch(e){
					continue;
				}
				break;
				
			}
			return xmlhttp;
		}

		function request(url,callback,data){ //进行异步请求
			var xmlhttp = createXMLHttpRequest();
			if(!xmlhttp) return false;
			var method = (data) ? "POST" : "GET";
			xmlhttp.open(method,url,true);
			xmlhttp.setRequestHeader('User-Agent','XMLHTTP/1.0');
			xmlhttp.setRequestHeader('Content-type','application/x-www-from-urlencoded');
			xmlhttp.onreadystatechange = function(){ //重写xmlhttp对象的onreadystatechange方法，该方法系浏览器自动执行，故写在请求动作之前无碍
								//该方法表示请求完成后对请求状态的判断，当且仅当请求是成功的才执行回调函数
				if(xmlhttp.readyState != 4) return false;
				if(xmlhttp.status != 200 && xmlhttp.status != 304){
					alert("HTTP 请求错误!"+xmlhttp.status+"\n\n\t请重试！");
					//window.location.href = "error.html";
					return false;
				}
				callback(xmlhttp); //执行回调函数;
			}
			//if(xmlhttp.readyState == 4) return true;
			xmlhttp.send(data); //向服务器发送异步请求
		}
		
		function createJ(){
			document.getElementById("cover").style.display = "block";
			document.getElementById("jbar").style.display = "block";
		}
		function stopJ(){
			document.getElementById("cover").style.display = "none";
			document.getElementById("jbar").style.display = "none";
		}

		function p(){ //点击上一题的动作
			document.getElementById("result").value="";
			var txt=document.getElementById("l2");
			//var str = txt.value.slice(txt.selectionStart,txt.selectionEnd);
			anser[pointer] = txt.value; //点击时，将当前工作区内的试题回答保存到数组
			txt.value = "";

			if(pointer==1) document.getElementById("previous").disabled = true;
			document.getElementById("next").disabled = false;
			pointer--;
			var b = document.getElementById("l1").value = subject[pointer];
			if(typeof(anser[pointer])!="undefined")
			txt.value = anser[pointer];
			
		}
		function n(){ //点击下一题的动作
			document.getElementById("result").value="";
			var txt=document.getElementById("l2");
			//var str = txt.value.slice(txt.selectionStart,txt.selectionEnd);
			anser[pointer] = txt.value; //点击时，将当前工作区内的试题回答保存到数组
			txt.value = "";

			if(pointer==subject.length-3) document.getElementById("next").disabled = true;
			document.getElementById("previous").disabled = false;
			pointer++;
			document.getElementById("l1").value = subject[pointer];
			if(typeof(anser[pointer])!="undefined")
			txt.value = anser[pointer];

		}
		document.onkeydown=function(event){
		    var e = event || window.event || arguments.callee.caller.arguments[0];
		    if(e && e.keyCode==113)   runing(); //F2   
		}
	</script>
	<style type="text/css">
		html{
			height: 96%;
			width:100%;
		}
		body{
			height: 100%;
			width:99%;
			background:#cacaca;
			background-image: url("img/qq.jpg");
			color:BLACK;
		}
		#con{
			width: 90%;
			height: 98%;
			margin:0 auto;
		}
		#title{
			width:100%;
			height:12%;
			font-size:220%;
			color: #cc3399;
		}
		#left{
			float: left;
			width: 45%;
			height:83%;
		}
		#right{
			float: right;
			width: 55%;
			height:84%;
		}
		#l1{
			width: 100%;
			height:30%;
		}
		#l2{
			width: 100%;
			height: 63%;
		}
		#result{
			width: 98%;
			height: 100%;
		}
		.text{
			font-size: 20px;
			color: BLUE;
			background-color: #d4d1bb;
		}
		#bar{
			width: 100%;
			height: 35px;
			border-width: 1px;
			border-style: solid;
		}
		
		#cover{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
	        height: 100%;
			background-color: #777;
	        z-index: 2;
	        display: none;
	        filter:alpha(Opacity=60);
	        -moz-opacity:0.6;
	        opacity: 0.6; 
	        border-style: solid;
			border-width: 1px;
	}
	#jbar{
			width:24%;
			position: absolute;
			z-index: 3;
        	background-color: #00A1FC;
			top: 25%;
			left:38%;
			display:none;
		}
		#jbar img{
			width:100%;
		}
	</style>

</head>
<body>
	<script>loadData()</script>
	<div id="cover"></div>
	<div id="jbar"> 
		<img src="img/sub.gif">
	</div>

	<div id="con">
		<label id="examTime"></label>
		<div id="title"><center><label>学生考试页面</label></center></div>
		<div id="left">
			<textarea class="text" id="l1"  readonly="true"></textarea>
			<div id="bar">
				<form action="">
					<label>工具栏:</label>
					<input type="button" name="finlish" id="finlish" value="提交考试" onclick="sub()">
					<input type="button" name="previous" id="previous" value="上一题" onclick="p()" disabled="true">
					<input type="button" name="next" id="next" value="下一题" onclick="n()">
					<input type="button" name="run" id="run" value="执行" onclick="runing()">
				</form>	
			</div>
			<textarea class="text" id="l2"></textarea>
		</div>

		<div id="right">
			<textarea class="text" id="result"  readonly="true"></textarea>
		</div>
	</div>
</body>
</html>
